@layout("/common/_container.html"){

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="ibox-tools">
                    部门：
                    <select id="department" style="width: 100px">
                        <option value="">所有</option>
                        @ for(dep in depts!){
                            <option value="${dep.fullname}" code="${dep.id}">${dep.fullname}</option>
                        @}
                    </select>

                        &nbsp;&nbsp;处/室：
                    <select id="place" style="width: 100px">

                    </select>
                        &nbsp;&nbsp;班组：
                    <select id="team" style="width: 100px">

                    </select>
                        &nbsp;&nbsp;岗位：
                        <select id="post" style="width: 100px">
                            <option value=""></option>
                            @ for(post in posts!){
                            <option value="${post.num}">${post.name}</option>
                            @}
                        </select>

                        &nbsp;&nbsp;用工类型：
                        <select id="laborType" style="width: 100px">
                            <option value="">所有</option>
                            @ for(laborType in laborTypes!){
                            <option value="${laborType.name}">${laborType.name}</option>
                            @}
                        </select>
                        &nbsp;&nbsp;年度： <input type="text" class="layer-date" id="year" style="
    width: 100px;
"/>
                        <button onclick="load()" class="layui-btn layui-btn-normal layui-btn-xs">确定</button>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="point_start_pip" style="height: 500px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${ctxPath}/static/modular/train/employee/employee.js?v=${version}"></script>
<script src="${ctxPath}/static/modular/train/employee/employee_info.js?v=${version}"></script>
<script>

    laydate.render({
        elem: '#year', //指定元素
        istime: 'false',
        type:'year',
        value:$("#year").val()
    });

    var load = function () {
        var param = {};
        param.year = $("#year").val();
        param.department = $("#department option:selected").val();
        param.place = $("#place option:selected").val();
        param.team = $("#team option:selected").val();
        param.postType = $("#post option:selected").val();
        param.laborType = $("#laborType option:selected").val();

        var pipChart = echarts.init(document.getElementById('point_start_pip'));
        var ajax = new $ax(Feng.ctxPath + "/analysis/pointStart", function (data) {
//            var option = JSON.parse(data.data);
//            pipChart.setOption(option);
            var scale = 1;
            var echartData = JSON.parse(data.data);
            var rich = {
                yellow: {
                    color: "#ffc72b",
                    fontSize: 30 * scale,
                    padding: [5, 4],
                    align: 'center'
                },
                total: {
                    color: "#ffc72b",
                    fontSize: 40 * scale,
                    align: 'center'
                },
                white: {
                    color: "#222",
                    align: 'center',
                    fontSize: 14 * scale,
                    padding: [21, 0]
                },
                blue: {
                    color: '#49dff0',
                    fontSize: 16 * scale,
                    align: 'center'
                },
                hr: {
                    borderColor: '#0b5263',
                    width: '100%',
                    borderWidth: 1,
                    height: 0,
                }
            };
            var option = {
                title: {
                    text:'员工总数',
                    left:'center',
                    top:'53%',
                    padding:[24,0],
                    textStyle:{
                        color:'#222',
                        fontSize:18*scale,
                        align:'center'
                    }
                },
                legend: {
                    selectedMode:false,
                    formatter: function(name) {
                        var total = 0; //各科正确率总和
                        var averagePercent; //综合正确率
                        echartData.forEach(function(value, index, array) {
                            total += value.value;
                        });
                        return '{total|' + total + '}';
                    },
                    data: [echartData[0].name],
                    // data: ['高等教育学'],
                    // itemGap: 50,
                    left: 'center',
                    top: 'center',
                    icon: 'none',
                    align:'center',
                    textStyle: {
                        color: "#fff",
                        fontSize: 16 * scale,
                        rich: rich
                    },
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series: [{
                    name: '员工总数量',
                    type: 'pie',
                    radius: ['42%', '50%'],
                    hoverAnimation: false,
                    color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
                    label: {
                        normal: {
                            formatter: '{b}：{c}  {per|{d}%}  ',
                            backgroundColor: '#eee',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,

                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 22,
                                    align: 'center'
                                },

                                hr: {
                                    borderColor: '#aaa',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    fontSize: 16,
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 55 * scale,
                            length2: 0,
                            lineStyle: {
                                color: '#0b5263'
                            }
                        }
                    },
                    data: echartData
                }]
            };

            pipChart.setOption(option);
        });
        ajax.set(param);
        ajax.start();

    };


    $(function () {
        load();
    });
</script>
@}